/**
 * LookerProperty module
 */
import eventHelper from "../../../utils/EventHelper";
import editorWidget from "../../../actions/Editor/widgets";
import editorActions from "../../../actions/Editor/editor"

import {bindActionCreators} from 'redux';
import {connect} from 'dva';

var React = require("react");
var tool = require("../../../utils/tool");
var consts = require("../../../utils/consts");
var storage = require("../../../utils/storage");
var CommonProperty = require("./CommonProperty");
// var dataProvider = require("../../provider/dataProvider");
// var historyProvider = require("../../provider/historyProvider");
// var WidgetPropertyCommand = require("../../command/WidgetPropertyCommand");
const LookerProperty = React.createClass({
    mixins: [CommonProperty],
    getInitialState: function () {
        return {
            show_floating_tips: false,
            icon: false,
            custom: 0,
        }
    },
    getInitialProps: function () {
        return {
            widget: {}
        }
    },
    componentWillMount: function () {
        var property = this.props.selectedWidget;
        this.setState({
            icon: property.icon,
            custom: parseInt(property.custom),
        });
        this.storeData = {};
        this.typeMapping = {
            offset_x: $._("PositionX"),
            offset_y: $._("PositionY"),
        };
    },
    open_floating_tips: function () {
        this.setState({show_floating_tips: !this.state.show_floating_tips});
    },
    handleOnPropertyChange: function (e) {
        const {updateWidget, setState}=this.props;
        let data = this.props.selectedWidget;

        var input = $(e.target || e.srcElement);
        var type = input.attr("name"), val = input.val();

        var scaleTypes = ["width", "height"];
        var mapping = {
            width: "scaleX",
            height: "scaleY"
        }, default_mapping = {
            width: "defaultScaleX",
            height: "defaultScaleY"
        };

        var numberTypes = ["offset_x", "offset_y", "offset_z"];
        if (val && $.inArray(type, numberTypes) !== -1) {
            val = parseFloat(val);
        }
        if (this.checkInputVaild(type, val)) {
            val = val == "" ? 0 : val;
            data = tool.rebuildWidgetData(data, type, val);
            data.radius = data.radius == undefined ? 0 : data.radius;
            data.is_saved = true;

            if ($.inArray(type, scaleTypes) != -1) {
                var defaultScale = this[default_mapping[type]] || 1;

                var scale = this.CONST.PAPER_MAX_WIDTH * val / this.CONST.PAPER_WIDTH;
                data[mapping[type]] = scale / defaultScale;
            }
            this.storeData = data;
            // $.extend(this.props.widget,data)
            // 同步更新3d中的数据
            eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, data);
            updateWidget(data);
            setState({selectedWidget: data});
        }
    },
    checkInputVaild: function (type, value) {
        var flag = true, errors = [];
        value = value * 1;

        var me = this;
        var validators = {
            offset_x: function (value, type) {
                if (value > consts.POSITION_RANGE) {
                    flag = false;
                    return "\"" + (me.typeMapping[type] || type) + "\"'" + $._("Can not be more than") + "'" + consts.POSITION_RANGE + "，" + $._("enter again") + "！";
                }
                return "";
            },
            offset_y: function (value, type) {
                if (value > consts.POSITION_RANGE) {
                    flag = false;
                    return "\"" + (me.typeMapping[type] || type) + "\"'" + $._("Can not be more than") + "'" + consts.POSITION_RANGE + "，" + $._("enter again") + "！";
                }
                return "";
            },
        };

        var validator = validators[type];
        if (validator) {
            var error = validator(value, type);
            if (error) {
                errors.push(error);
            }
        }

        errors.length && alert(errors.join(""));
        return flag;
    },
    handleOnInputBlur: function () {
        // const {updateWidget}=this.props;
        // updateWidget(this.storeData);
    },
    render: function () {
        const widget = this.props.selectedWidget;
        return (
            <div>
                <form noValidate className="property-container property" name="form.name">
                    <div className='floating_screen'>
                        <header className='floatingbtn_head'>
                            {$._("Property")}
                        </header>
                        <div className="floating_content">
                            <a className='float_btn_help' onClick={this.open_floating_tips}>{$._("What is lookers")}</a>
                            <div className="floating_tips"
                                 style={{display:this.state.show_floating_tips?"block":'none',left:'-290px'}}
                                 onClick={this.open_floating_tips}>
                                <img src="/static/idealsee/images/new_editor/editor/lookers.jpg"/>
                            </div>
                            <div className="rowlist looker-position">
                                <label>{$._("Position")}</label>
                                <input name="offset_x" onChange={this.handleOnPropertyChange}
                                       onBlur={this.handleOnInputBlur} data-number type="number" value={widget.offset_x}
                                       className='form-control'/>
                                <input name="offset_y" onChange={this.handleOnPropertyChange}
                                       onBlur={this.handleOnInputBlur} data-number type="number" value={widget.offset_y}
                                       className='form-control' style={{marginRight:"0px"}}/>
                                <span className="position position-x">x</span>
                                <span className="position position-y">y</span>
                            </div>
                            <div className='rowlist row_offset_z'>
                                <label>{$._("Offset_z")}</label>
                                <input name="offset_z" onChange={this.handleOnPropertyChange}
                                       onBlur={this.handleOnInputBlur} type="number" value={widget.offset_z}
                                       className='form-control'/>
                            </div>
                            <div className="floating_btn_delaytime">
                                <div>{$._('Widget appears time,page load')}</div>
                                <div>
                                    <label>{$._("Delay")}</label>
                                    <input name='start_time' type='range' min='1' className='delaytime_range' min='0'
                                           max="60" step="1" value={widget.start_time}
                                           onChange={this.handleOnPropertyChange} onBlur={this.handleOnInputBlur}/>
                                    <div className='pull-right'>{widget.start_time}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
});


const mapStateToProps = ({editor}) => {
    return editor;
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({...editorActions, ...editorWidget}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(LookerProperty);
